@charset "utf-8";
@import "common/common";
.container-fluid {
    .flash {
        background: url(../img/family/图层-54.jpg) no-repeat right 235px top 60px #8bc01f;
        padding: 67px 0 94px 0;
        .flash_title {
            span {
                &:nth-child(1) {
                    font-size: 48px;
                    color: #8bc01f;
                    padding: 8px 20px 10px 20px;
                    background-color: #FFFFFF;
                    border-radius: 5px;
                }
                &:nth-child(2) {
                    font-size: 48px;
                    color: #FFFFFF;
                    line-height: 68px;
                }
            }
        }
        p {
            padding-left: 15px;
            padding-right: 65px;
            &:nth-child(2) {
                font-size: 24px;
                color: #ffffff;
                margin: 23px 0 69px 0;
            }
            &:nth-child(3) {
                font-size: 14px;
                color: #FFFFFF;
                line-height: 30px;
            }
            &:nth-child(4) {
                font-size: 14px;
                color: #FFFFFF;
                line-height: 30px;
            }
            &:nth-child(5) {
                font-size: 14px;
                color: #FFFFFF;
                line-height: 30px;
            }
        }
        a {
            display: inline-block;
            font-size: 14px;
            color: #8BC01F;
            padding: 10px 23px;
            background-color: #e8f2d2;
            border-radius: 5px;
            margin-left: 15px;
            margin-top: 24px;
            text-decoration: none;
            &:hover {
                background-color: #e6f679;
                color: #50602f;
            }
        }
    }
    .player {
        padding: 75px 0 134px 0;
        background: url(../img/family/图层-55.jpg) no-repeat left 150px top 150px, url(../img/family/图层-57.jpg) no-repeat right 230px top 289px #3393df;
        .player_title {
            span {
                &:nth-child(1) {
                    font-size: 40px;
                    color: $color;
                    background-color: #ffffff;
                    padding: 6px 12px 8px 11px;
                    border-radius: 3px;
                }
                &:nth-child(2) {
                    font-size: 48px;
                    color: #FFFFFF;
                }
            }
        }
        .player_text {
            padding: 0 50px;
            h3 {
                padding: 0;
                font-size: 24px;
                line-height: 42px;
                color: #ffffff;
            }
            p {
                font-size: 14px;
                color: #FFFFFF;
                line-height: 30px;
            }
        }
    }
    .air-and-open {
        padding: 89px 0 265px 0;
        background: url(../img/family/图层-59.png) no-repeat left 314px top 471px,url(../img/family/图层-60.png) no-repeat right 314px top 471px;
        .air,
        .open {
            padding: 0 55px;
        }
        .air_title,
        .open_title {
            span {
                &:nth-child(1) {
                    font-size: 36px;
                    color: #FFFFFF;
                    padding: 7px 11px;
                    background-color: #3393DF;
                }
                &:nth-child(2) {
                    font-size: 42px;
                    color: #3393DF;
                }
            }
        }
        h3 {
            font-size: 18px;
            color: #3393DF;
            margin: 0;
            line-height: 38px;
        }
        p {
            font-size: 14px;
            color: #5d5d5d;
            text-indent: 2em;
            min-height: 40px;
            &:nth-child(2) {
                font-size: 18px;
                color: #5d5d5d;
                text-indent: 0;
                line-height: 68px;
            }
        }
    }
    .store-and-publish {
        padding: 89px 0 265px 0;
        background: url(../img/family/图层-62.png) no-repeat left 314px top 385px,url(../img/family/图层-63.png) no-repeat right 314px top 385px #f7f7f7;
        .store,
        .publish {
            padding: 0 55px;
        }
        .store_title,
        .publish_title {
            span {
                &:nth-child(1) {
                    font-size: 36px;
                    color: #FFFFFF;
                    padding: 7px 11px;
                    background-color: #3393DF;
                }
                &:nth-child(2) {
                    font-size: 42px;
                    color: #3393DF;
                }
            }
        }
        h3 {
            font-size: 18px;
            color: #3393DF;
            margin: 0;
            line-height: 38px;
        }
        p {
            font-size: 14px;
            color: #5d5d5d;
            text-indent: 2em;
            min-height: 40px;
            &:nth-child(2) {
                font-size: 18px;
                color: #5d5d5d;
                text-indent: 0;
                line-height: 68px;
            }
        }
    }
}

@media screen and (max-width:768px) {
    .container-fluid {
        .flash {
            background: #8BC01F;
        }
        .player {
            background: #3393DF;
        }
        .air-and-open{
            background: #FFFFFF;
        }
        .store-and-publish{
            background: #f7f7f7;
        }
    }
}

@media screen and (max-width:322px) {
    .container-fluid {
        .flash {
            .flash_title {
                span {
                    &:nth-child(1) {
                        font-size: 36px;
                    }
                    &:nth-child(2) {
                        font-size: 36px;
                    }
                }
            }
        }
    }
}
@media screen and (max-width:414px){
    .container-fluid{
        .air-and-open,
        .store-and-publish{
            padding-bottom: 100px;
        }
        .air,
        .open,
        .store,
        .publish{
            p{
                &:nth-child(2){
                    line-height: 30px;
                }
            }
        }
    }
}
